<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>客流量预测</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="robots" content="all,follow">
    <!--css-->
    <!-- Bootstrap CSS-->
    <link rel="stylesheet" href="vendor/bootstrap/css/bootstrap.min.css">
    <!-- Google fonts-->
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Cardo:400,400i">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Montserrat:400,700">
    <!-- Lightbox-->
    <link rel="stylesheet" href="vendor/lightbox2/css/lightbox.min.css">
    <!-- Font Awesome-->
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css">
    <!-- Parallax-->
    <link rel="stylesheet" href="vendor/onepage-scroll/onepage-scroll.css">
    <!-- theme stylesheet-->
    <link rel="stylesheet" href="css/style.default.css" id="theme-stylesheet">
    <!-- Custom stylesheet - for your changes-->
    <link rel="stylesheet" href="css/custom.css">
    <!-- Favicon-->
    <link rel="shortcut icon" href="favicon.png">

    <!-- Tweaks for older IEs--><!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]-->
    <script src="vendor/jquery/jquery.min.js"></script>
    <!--  图标-->
    <script src="js/echarts.js"></script>
    <script src="js/layui.js"></script>
    <script src="js/lay-config.js"></script>
</head>
<body>
<div class="main">
    <section class="bg-cover bg-center hero">
        <div class="dark-overlay"></div>
        <div class="position-relative z-index-1">
            <div class="container text-center text-white">
                <p class="font-italic lead">欢迎进入BP神经网络客流量预测系统 ! </p>
                <h1 class="text-uppercase my-4">为您提供精准的预测</h1>
                <p class="font-italic lead"> 我将结合多维度数据， 使用BP神经网络来对您以往的客流量精准分析.</p>
                <p class="font-italic lead"> 我们致力于给您提供精确的数据， 方便您管理自己的店铺.</p>
            </div>
        </div>
        <!--	<div class="scroll-btn link-scroll"><i class="fas fa-angle-double-down"></i></div>-->
    </section>
    <!--播放视频-->
    <section id="1" class="bg-white">
        <div class="d-flex h-100 align-items-center">
            <div class="container">
                <div class="row">

                    <div class="col-lg-8">
                        <div class="col-lg-8 mb-4 mb-lg-0">
                            <div id="GrindPlayer">

                            </div>
                        </div>
                    </div>

                    <div class="col-lg-4" style="">
                        <div>
                            <div class="card mb-6 box-shadow">
                                <div class="card-header text-center">
                                    <h4 class="my-0 font-weight-normal">控制台</h4>
                                </div>
                                <div class="card-body text-center">
                                    <div style="margin-top: 30px;"></div>
                                    <h3 class="card-title pricing-card-title" style="margin-top: 20px;">入站人流统计：<a
                                            id="in_number">0</a>
                                        <small class="text-muted">/ 人次</small>
                                    </h3>


                                    <div style="margin-top: 30px;"></div>
                                    <h3 class="card-title pricing-card-title" style="margin-top: 20px;">出站人流统计：<a
                                            id="out_number">0</a>
                                        <small class="text-muted">/ 人次</small>
                                    </h3>

                                    <div style="margin-top: 30px;"></div>
                                    <h3 class="card-title pricing-card-title" style="margin-top: 20px;">出站人流总记：<a
                                            id="cnt_out_number">0</a>
                                        <small class="text-muted">/ 人次</small>
                                    </h3>

                                    <div style="margin-top: 30px;"></div>
                                    <h3 class="card-title pricing-card-title" style="margin-top: 20px;">入站人流总计：<a
                                            id="cnt_in_number">0</a>
                                        <small class="text-muted">/ 人次</small>
                                    </h3>
                                    <div style="margin-top: 10px;"></div>
                                    <button type="button" class="btn btn-lg btn-block btn-primary" onclick="">
                                        重新加载页面
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
        </div>
    </section>
    <script type="text/javascript" src="js/swfobject.js"></script>
    <script type="text/javascript" src="js/ParsedQueryString.js"></script>
    <!--播放视频的  js -->
    <script type="text/javascript">


        var player = null;

        <!--加载视频url-->
        function loadStream(url) {
            player.setMediaResourceURL(url);
        }

        function getlink(url) {
            return "/index?src=" + encodeURIComponent(url);
        }

        function jsbridge(playerId, event, data) {
            if (player == null) {
                player = document.getElementById(playerId);
            }
            switch (event) {
                case "onJavaScriptBridgeCreated":
                    listStreams(teststreams, "streamlist");
                    break;
                case "timeChange":
                case "timeupdate":
                case "progress":
                    break;
                default:
                    console.log(event, data);
            }
        }

        // Collect query parameters in an object that we can
        // forward to SWFObject:

        var pqs = new ParsedQueryString();
        var parameterNames = pqs.params(false);
        var parameters = {
            //src:"rtmp://183.175.12.160:1935/live/stream",
            //src:"rtmp://127.0.0.1/live/test",
            //src: "rtmp://pull-g.kktv8.com/livekktv/100987038",
            src: "rtmp://123.57.208.36:1935/live/test",
            autoPlay: "true",
            verbose: true,
            controlBarAutoHide: "true",
            controlBarPosition: "bottom",
            poster: "images/poster.png",
            javascriptCallbackFunction: "jsbridge",
            plugin_hls: "flashlsOSMF.swf",
            hls_minbufferlength: -1,
            hls_maxbufferlength: 30,
            hls_lowbufferlength: 3,
            hls_seekmode: "KEYFRAME",
            hls_startfromlevel: -1,
            hls_seekfromlevel: -1,
            hls_live_flushurlcache: false,
            hls_info: true,
            hls_debug: false,
            hls_debug2: false,
            hls_warn: true,
            hls_error: true,
            hls_fragmentloadmaxretry: -1,
            hls_manifestloadmaxretry: -1,
            hls_capleveltostage: false,
            hls_maxlevelcappingmode: "downscale"
        };


        <!--加载播放视频的参数-->
        for (var i = 0; i < parameterNames.length; i++) {
            var parameterName = parameterNames[i];
            parameters[parameterName] = pqs.param(parameterName) ||
                parameters[parameterName];
        }

        var wmodeValue = "direct";
        var wmodeOptions = ["direct", "opaque", "transparent", "window"];
        if (parameters.hasOwnProperty("wmode")) {
            if (wmodeOptions.indexOf(parameters.wmode) >= 0) {
                wmodeValue = parameters.wmode;
            }
            delete parameters.wmode;
        }

        <!--绑定视频窗口的   js -->
        // Embed the player SWF:
        swfobject.embedSWF(
            "/GrindPlayer.swf"
            , "GrindPlayer"
            , 640
            , 480
            , "10.1.0"
            , "expressInstall.swf"
            , parameters
            , {
                allowFullScreen: "true",
                wmode: wmodeValue
            }
            , {
                name: "GrindPlayer"
            }
        );

    </script>
    <!--显示人数的js-->
    <script>
        // 显示控制台的 累计出入站人数
        function LoadCntNum() {
            $.ajax({
                type: "post",
                async: true,
                url: "/CntNum",
                success: function (data) {
                    console.log(data);
                    $("#cnt_out_number").html(data.CntOutNum);
                    $("#cnt_in_number").html(data.CntInNum);
                },
                error: function (jqObj) {
                    console.log(jqObj.status)
                }
            });
        }

        // 显示控制台的 实时出入站人数
        function reloadView() {
            $.ajax({
                type: "post",
                async: true,
                url: "/getPeopleNumber",
                success: function (data) {
                    // console.log(data);

                    console.log(data.in_number);

                    console.log(data.out_number);

                    $("#in_number").html(data.in_number);
                    $("#out_number").html(data.out_number);
                },
                error: function (jqObj) {
                    console.log(jqObj.status)
                }
            });
        }

        //  setInterval('LoadCntNum()', 2000); //每2秒刷新一次页面下边显示的数据
        setInterval('reloadView()', 2000); //每2秒刷新一次页面下边显示的数据
    </script>
    <!--进出站数据分析视图-->
    <section class="bg-transparent">
        <div class="d-flex h-100 align-items-center">
            <div class="container">
                <div class="row">
                    <div class="col-lg-12 text-center">
                        <h2 class="text-uppercase lined">进出站人流分析</h2>
                    </div>

                    <div id="real" style="margin-left:150px; width: 800px;height:400px;">

                    </div>

                </div>
            </div>
        </div>
    </section>
    <!--进出站数据分析视图 js-->
    <script type="text/javascript">

        var myChart2 = echarts.init(document.getElementById('real'));

        var time = [];
        var num1 = [];
        var num2 = [];

        function loadDayData() {
            console.log("当前小时：" + new Date().getHours());
            var hours = new Date().getHours();

            $.ajax({
                type: "post",
                async: true,
                url: "/getDayData",
                data: {
                    hours: hours
                },
                // dataType: "json",
                success: function (result) {
                    // 请求成功时执行该函数内容，result即为服务器返回的json对象
                    // console.log(result);
                    if (result) {
                        for (var i = 0; i < result.length; i++) {
                            time[i] = result[i].hour;
                            num1[i] = result[i].inNum;
                            num2[i] = result[i].outNum;
                        }
                    }
                    myChart2.setOption(option2);
                    myChart2.hideLoading();    //隐藏加载动画
                },
                error: function (errorMsg) {
                    //请求失败时执行该函数
                    alert("请求数据失败!");
                    myChart2.hideLoading();
                }
            });
        }

        /// 调用函数
        loadDayData();
        option2 = {
            title: {
                text: '当日按小时进站出站统计'
            },
            tooltip: {
                trigger: 'axis'
            },
            legend: {
                data: ['进站', '出站']
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            toolbox: {
                feature: {
                    saveAsImage: {}
                }
            },
            xAxis: {
                type: 'category',
                boundaryGap: false,
                data: time
            },
            yAxis: {
                type: 'value'
            },
            series: [
                {
                    name: '进站',
                    type: 'line',
                    stack: '总量',
                    data: num1
                },
                {
                    name: '出站',
                    type: 'line',
                    /*   stack: '总量',*/
                    data: num2
                }
            ]
        };
        myChart2.setOption(option2);
    </script>
    <!--总人流量分析-->
    <section>
        <div class="d-flex h-100 align-items-center">
            <div class="container">
                <div class="row">
                    <div class="col-lg-12 text-center">
                        <h2 class="text-uppercase lined">人流量分析视图</h2>
                    </div>
                    <div id="DayTotal" style="margin-left:150px; width: 800px;height:400px;">
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!--总人流量的js-->
    <script type="text/javascript">

        var myChart = echarts.init(document.getElementById('DayTotal'));

        var daynum = [];
        var daytime = [];

        function total_num() {
            $.ajax({
                type: "post",
                async: true,
                url: "/date",
                data: {},
                dataType: "json",
                success: function (result) {
                    console.log("totalNum: " + JSON.stringify(result));
                    if (result) {
                        for (var i = 0; i < result.length; i++) {
                            daytime[i] = result[i].date;
                            daynum[i] = result[i].total;
                        }
                    }
                    console.log("每天的人数：" + daynum);
                    console.log("日期：" + daytime);
                    myChart.setOption(option);
                    myChart.hideLoading();    // 隐藏加载动画
                },
                error: function (errorMsg) {
                    //请求失败时执行该函数
                    alert("请求数据失败!");
                    myChart.hideLoading();
                }
            });
        }

        // 调用函数
        total_num();

        option = {
            tooltip: {
                trigger: 'axis',
                position: function (pt) {
                    return [pt[0], '100%'];
                }
            },
            title: {
                left: 'center',
                text: '每日人流量面积图',
            },
            toolbox: {
                feature: {
                    dataZoom: {
                        yAxisIndex: 'none'
                    },
                    restore: {},
                    saveAsImage: {}
                }
            },
            xAxis: {
                type: 'category',
                boundaryGap: false,
                data: daytime
            },
            yAxis: {
                type: 'value',
                boundaryGap: [0, '100%']
            },
            dataZoom: [{
                type: 'inside',
                start: 0,
                end: 10
            }, {
                start: 0,
                end: 10,
                handleIcon: 'M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',
                handleSize: '80%',
                handleStyle: {
                    color: '#fff',
                    shadowBlur: 3,
                    shadowColor: 'rgba(0, 0, 0, 0.6)',
                    shadowOffsetX: 2,
                    shadowOffsetY: 2
                }
            }],
            series: [
                {
                    name: '人流量',
                    type: 'line',
                    smooth: true,
                    symbol: 'none',
                    sampling: 'average',
                    itemStyle: {
                        color: 'rgb(255, 70, 131)'
                    },
                    areaStyle: {
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                            offset: 0,
                            color: 'rgb(255, 158, 68)'
                        }, {
                            offset: 1,
                            color: 'rgb(255, 70, 131)'
                        }])
                    },
                    data: daynum
                }
            ]
        };
        myChart.setOption(option);
    </script>

    <!--周分析视图-->
    <section>
        <div class="d-flex h-100 align-items-center">
            <div class="container">
                <div class="row">
                    <div class="col-lg-12 text-center">
                        <h2 class="text-uppercase lined">人流统计数据分析</h2>
                    </div>

                    <div id="echart_weak" style="margin-left:150px; width: 800px;height:400px;">

                    </div>

                </div>
            </div>
        </div>
    </section>
    <!--周分析视图  的 js -->
    <script type="text/javascript">

        var weakecharts = echarts.init(document.getElementById('echart_weak'));

        /*        var myDate = new Date();
                var year = myDate.getFullYear(); //年
                var month = myDate.getMonth() + 1; //月
                var day = myDate.getDate(); // 日
                var days = myDate.getDay();
                // 0-6 周几
                console.log("周几：" + days);*/

        var weakId = [];
        var am1 = [];
        var am2 = [];
        var pm1 = [];
        var pm2 = [];
        var night = [];

        function weak() {
            $.ajax({
                url: 'weakNum',
                type: "post",
                async: false,
                dataType: "json",
                success: function (data, status) {

                    console.log("周数据：" + JSON.stringify(data));
                    var weakDate = JSON.stringify(data);

                    console.log(weakDate);

                    var f = eval(weakDate);

                    console.log(f);
                    for (var i = 0; i < f.length; i++) {
                        am1[i] = f[i].amOne;
                        am2[i] = f[i].amTwo;
                        weakId[i] = f[i].date;
                        night[i] = f[i].night;
                        pm1[i] = f[i].pmOne;
                        pm2[i] = f[i].pmTwo;
                    }
                    console.log("周数据日期： " + weakId);
                    console.log("上午1： " + am1);
                    console.log("上午2：" + am2);
                    console.log("下午1： " + pm1);
                    console.log("下午2：" + pm2);

                },
                error: function (status) {
                    alert(status);
                }
            });
        }

        // 调用函数
        weak();

        var weakoption = {
            title: {
                left: 'left',
                text: '人流量周统计',
            },
            tooltip: {
                trigger: 'axis'
            },
            legend: {
                data: ['十点之前', '十点之后', '两点之前', '两点到六点', '六点之后']
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            toolbox: {
                feature: {
                    saveAsImage: {}
                }
            },
            xAxis: {
                type: 'category',
                boundaryGap: false,
                data: weakId, // ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
                // data: ['2020-05-13', '2020-05-12', '2020-05-11', '周四', '周五', '周六', '周日'],
            },
            yAxis: {
                type: 'value'
            },
            series: [
                {
                    name: '十点之前',
                    type: 'line',
                    //data: [120, 132, 101, 134, 90, 230, 210]
                    data: am1
                },
                {
                    name: '十点之后',
                    type: 'line',
                    // data: [220, 182, 191, 234, 290, 330, 310]
                    data: am2
                },
                {
                    name: '两点之前',
                    type: 'line',
                    // data: [150, 232, 201, 154, 190, 330, 410]
                    data: pm1
                },
                {
                    name: '两点到六点',
                    type: 'line',
                    // data: [320, 332, 301, 334, 390, 330, 320]
                    data: pm2
                },
                {
                    name: '六点之后',
                    type: 'line',
                    data: night
                    // data: [820, 932, 901, 934, 1290, 1330, 1320]
                }
            ]
        };
        weakecharts.setOption(weakoption);

        // echarts 窗口缩放自适应

        window.onresize = function () {
            weakecharts.resize();
        }

    </script>

    <!--预测数据图-->
    <section class="bg-transparent">
        <div class="d-flex h-100 align-items-center">
            <div class="container">
                <div class="row">
                    <div class="col-lg-12 text-center">
                        <h2 class="text-uppercase lined">人流预测分析</h2>
                    </div>

                    <div id="pre" style="margin-left:150px; width: 800px;height:400px;">

                    </div>

                </div>
            </div>
        </div>
    </section>

    <!--预测数据图 js -->
    <script type="text/javascript">
        /**
         * 玫瑰图表
         */
        var echartsPies = echarts.init(document.getElementById('pre'), 'walden');
        var preNum = [];
        var pre_Date = [];
        // 调用函数
        PreDate();

        function pre(value, name) {
            this.value = value;
            this.name = name;
        }

        function PreDate() {
            $.ajax({
                url: 'preDate',
                type: "post",
                async: false,
                dataType: "json",
                success: function (data, status) {
                    console.log("预测数据：" + JSON.stringify(data));
                    preNum = JSON.stringify(data);
                    var f = eval(preNum);
                    for (var i = 0; i < f.length; i++) {
                        console.log(f[i]);
                        console.log(i);
                        pre_Date[i] = f[i].value
                    }
                    console.log(pre_Date[2]);
                },
                error: function (status) {
                    alert(status);
                }
            });
        }

        console.log(pre_Date.length);

        var optionPies = {
            title: {
                text: '人流预测',

                left: 'center'
            },
            tooltip: {
                trigger: 'item',
                formatter: '{a} <br/>{b} : {c} ({d}%)'
            },
            legend: {
                orient: 'vertical',
                left: 'left',

                data: ['十点之前', '十点之后', '两点之前', '两点到六点', '六点之后']
            },


            series: [
                {
                    name: '第二天人流预测',
                    type: 'pie',
                    radius: '55%',
                    center: ['50%', '60%'],
                    roseType: 'radius',
                    data:
                        [
                            {value: pre_Date[0], name: '十点之前'},
                            {value: pre_Date[1], name: '十点之后'},
                            {value: pre_Date[2], name: '两点之前'},
                            {value: pre_Date[3], name: '两点到六点'},
                            {value: pre_Date[4], name: '六点之后'},
                        ],

                    emphasis: {
                        itemStyle: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }
            ]
        };
        echartsPies.setOption(optionPies);
    </script>

    <!--预测和实际数据分析视图-->
    <section class="bg-transparent">
        <div class="d-flex h-100 align-items-center">
            <div class="container">
                <div class="row">
                    <div class="col-lg-12 text-center">
                        <h2 class="text-uppercase lined">人流统计数据分析</h2>
                    </div>

                    <div id="pre_real" style="margin-left:150px; width: 800px;height:400px;">

                    </div>

                </div>
            </div>
        </div>
    </section>
    <script type="text/javascript">
        /**
         * 报表功能
         */
        var echartsRecords = echarts.init(document.getElementById('pre_real'), 'walden');
        var preAndOriginDate = [];
        var preAndOrigin_PreDate = [];
        var preAndOrigin_OriginDate = [];


        PreAndOriginDate();

        function PreAndOriginDate() {
            $.ajax({
                url: 'preAndOrigin',
                type: "get",
                async: false,
                dataType: "json",
                success: function (data, status) {
                    console.log("预测数据：" + JSON.stringify(data));
                    preNum = JSON.stringify(data);
                    var f = eval(preNum);
                    for (var i = 0; i < f.length; i++) {
                        console.log(f[i]);

                        preAndOriginDate[i] = f[i].date;
                        preAndOrigin_PreDate[i] = f[i].pre;
                        preAndOrigin_OriginDate[i] = f[i].origin;

                    }
                    console.log(preAndOriginDate[2]);
                },
                error: function (status) {
                    alert(status);
                }
            });
        }

        var optionRecords = {
            title: {
                text: '实际-真实.图'
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'cross',
                    label: {
                        backgroundColor: '#6a7985'
                    }
                }
            },
            legend: {
                data: ['真实数据', '预测数据']
            },
            toolbox: {
                feature: {
                    saveAsImage: {}
                }
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },

            xAxis: [
                {
                    type: 'category',
                    boundaryGap: false,
                    // data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
                    data: preAndOriginDate
                }
            ],
            yAxis: [
                {
                    type: 'value'
                }
            ],
            series: [

                {
                    name: '真实数据',
                    type: 'line',
                    areaStyle: {},
                    //  data: [220, 182, 191, 234, 290, 330, 310]
                    data: preAndOrigin_OriginDate
                },
                {
                    name: '预测数据',
                    type: 'line',
                    stack: '总量',
                    areaStyle: {},
                    // data: [150, 232, 201, 154, 190, 330, 410]
                    data: preAndOrigin_PreDate
                },

            ]
        };
        echartsRecords.setOption(optionRecords);
    </script>

    <!--月分析视图-->
    <section class="bg-gray">
        <div class="d-flex h-100 align-items-center">
            <div class="container">
                <header class="mb-5 text-center">
                    <h2 class="text-uppercase lined">人流统计数据分析</h2>
                </header>
                <div class="row text-center">
                    <!--月分析视图-->
                    <div id="MonthTotal" style="margin-left:150px; width: 800px;height:400px;">

                    </div>
                </div>
            </div>
        </div>
    </section>
    <!--月分析视图  的 js -->
    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var MonthTotalChart = echarts.init(document.getElementById('MonthTotal'));

        var data_temp = new Array("120", "120", "120", "120", "110", "120", "12", "120", "105", "120", "12", "120");
        optionMonth = {
            title: {
                text: '大数据量人流统计（月视图）',

                subtext: '',
                x: 'center'
            },
            tooltip: {
                trigger: 'item',
                formatter: "{a} <br/>{b} : {c} ({d}%)"
            },
            legend: {
                x: 'center',
                y: 'bottom',
                data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
            },
            toolbox: {
                show: true,
                feature: {
                    mark: {show: true},
                    dataView: {show: true, readOnly: false},
                    magicType: {
                        show: true,
                        type: ['pie', 'funnel']
                    },
                    restore: {show: true},
                    saveAsImage: {show: true}
                }
            },
            calculable: true,
            series: [

                {
                    name: '月人流统计表示',

                    type: 'pie',
                    radius: [50, 150],
                    center: ['50%', '50%'],
                    roseType: 'area',
                    data: [
                        {value: data_temp[0], name: '1月'},
                        {value: data_temp[1], name: '2月'},
                        {value: data_temp[2], name: '3月'},
                        {value: data_temp[3], name: '4月'},
                        {value: data_temp[4], name: '5月'},
                        {value: data_temp[5], name: '6月'},
                        {value: data_temp[6], name: '7月'},
                        {value: data_temp[7], name: '8月'},
                        {value: data_temp[8], name: '9月'},
                        {value: data_temp[9], name: '10月'},
                        {value: data_temp[10], name: '11月'},
                        {value: data_temp[11], name: '12月'}
                    ]
                }
            ]
        };
        // 使用刚指定的配置项和数据显示图表。
        MonthTotalChart.setOption(optionMonth);
    </script>
    <!--填写预测条件的表单 -->
    <section>
        <div class="d-flex h-100 align-items-center">
            <div class="container">
                <header class="text-center mb-5">
                    <h2 class="text-uppercase lined">ADMIN</h2>
                </header>
                <div class="row">
                    <div class="col-lg-6">

                        <div class="row">
                            <div class="form-group col-lg-6">
                                <label for="firstName">第二天气温 </label>
                                <input id="weather" type="text" name="weather"
                                       placeholder="Enter the next day's weather temperature" class="form-control">
                            </div>
                            <div class="form-group col-lg-6">
                                <label for="lastName">第二天天气 </label>
                                <input id="temp" type="text" name="temp" placeholder="Enter the next day's weather"
                                       class="form-control">
                            </div>
                            <div class="form-group col-lg-12">
                                <label for="email">活动等级 </label>
                                <input id="act" type="text" name="act" placeholder="Enter activity level"
                                       class="form-control">
                            </div>
                            <div class="form-group col-lg-12">
                                <label for="lastName">节假日等级 </label>
                                <input id="festival" name="festival" placeholder="Enter holiday level"
                                       class="form-control">

                            </div>
                            <div class="form-group col-lg-12">
                                <button id="submit" class="btn btn-outline-primary w-100">Send</button>
                            </div>
                        </div>

                    </div>
                    <div class="col-lg-6">

                        <p>
                            填写说明： 温度

                        </p>
                        <p>
                            填写说明： 天气：0.1 - 1

                        </p>
                        <p>
                            填写说明： 活动：0.1 - 1

                        </p>
                        <p>
                            填写说明： 节假日：0.1 - 1

                        </p>
                        <ul class="mb-0 list-inline text-center">
                            <li class="list-inline-item"><a href="#" class="social-link social-link-facebook"><i
                                    class="fab fa-facebook-f"></i></a></li>
                            <li class="list-inline-item"><a href="#" class="social-link social-link-twitter"><i
                                    class="fab fa-twitter"></i></a></li>
                            <li class="list-inline-item"><a href="#" class="social-link social-link-google-plus"><i
                                    class="fab fa-google-plus-g"></i></a></li>
                            <li class="list-inline-item"><a href="#" class="social-link social-link-instagram"><i
                                    class="fab fa-instagram"></i></a></li>
                            <li class="list-inline-item"><a href="#" class="social-link social-link-email"><i
                                    class="fas fa-envelope"></i></a></li>
                        </ul>
                    </div>
                </div>
                <footer class="py-5 mt-5">
                    <div class="row">
                        <div class="col-lg-6 text-center text-lg-left">
                            <p class="font-italic mb-0 text-gray">Copyright &copy; 2020.Company lynu All
                            </p>
                        </div>
                        <div class="col-lg-6 text-center text-lg-right">
                            <p class="font-italic mb-0 text-gray"></p>
                        </div>
                    </div>
                </footer>
            </div>
        </div>
    </section>

    <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
    <script src="http://malsup.github.io/jquery.form.js"></script>

    <!--提交表单的jss-->
    <script>
        $('button').on('click', function () {
            var weather = $('#weather').val(),
                temp = $('#temp').val(),
                act = $('#act').val(),
                festival = $('#festival').val();
            console.log(weather);
            $.ajax({
                data:
                    JSON.stringify({
                        'weather': weather,
                        'temp': temp,
                        'act': act,
                        'festival': festival,
                    }),
                url: 'savaXinfo',
                type: "post",
                contentType: 'application/json',
                success: function (date, status) {
                    alert(date);
                },
                error: function (status, date) {
                    alert(date);
                },
            });
        });


    </script>
</div>
<!-- JavaScript files-->
<script src="vendor/jquery/jquery.min.js"></script>
<script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
<script src="vendor/onepage-scroll/jquery.onepage-scroll.min.js"></script>
<script src="vendor/lightbox2/js/lightbox.min.js"></script>
<script src="js/front.js"></script>
<!-- FontAwesome CSS - loading as last, so it doesn't block rendering-->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.1/css/all.css">
</body>
</html>